<template>
  <div class="root" style="margin-bottom:100px">
    <div class="logo">
      <img src="../icon/logo.png" />
    </div>
    <div class="triggle">
      <el-dropdown>
        <span class="el-dropdown-link el-icon-caret-bottom"></span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in data_header.drop_list.sub_menu" :key="item.label">
                {{item.label}}

            </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

<!-- 功能区域 -->
    <div class="tooPlace">
        <div style="display:flex" v-for="(item,index) in data_header.head_menu" :key="item">

         <div style="margin-top:15px" :class="iconArr[index]"></div>
            <el-button class="toolBtn" size="small">{{item.label}}</el-button>
            </div>
<!-- 用户头像以及下拉区域 -->
    </div>
        <div class="userPlace">
       
        <el-dropdown placement="top-start" size="medium">
                <img
                  v-show="!img"
                  src="https://ats.momeyun.com/image/all.png"
                  class="user-image"
                  style="border-radius:25px;width:30px"
                  alt="User Image"
                  @click="showHead"
                />
              <el-dropdown-menu slot="dropdown">
                 <img
                  v-show="!img"
                  src="https://ats.momeyun.com/image/all.png"
                  class="user-image"
                  style="border-radius:45px;width:90px;margin-left:120px;"
                  alt="User Image"
                  @click="showHead"
                />
                  <el-button @click="gotoPersonalCenter">
                      个人中心
                  </el-button>
                     <el-button @click="gotoCompanyList">
                      企业列表
                  </el-button>
                     <el-button @click="logout">
                      退出登录
                  </el-button>
  </el-dropdown-menu>
  
        </el-dropdown>
            <span id="username" class="username">{{ userName }}</span>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import axios from "axios";
import { getHeader } from "../api/testApi";
export default {
  props: ["data"],
  data() {
    return {
      data_header: {},
      img: "",
      userName: "zhangtong",
      //   type: this.data,
      showHead: false,
      iconArr: [],
      query: {
        type: this.data,
      },
    };
  },
  methods: {
    test() {
      getHeader(qs.stringify(this.query)).then((response) => {
        this.data_header = response.data.data;
        this.data_header.head_menu.forEach((element) => {
          this.iconArr.push("iconfont " + element.icon);
        });
      });
    },
    //     getHeader() {
    //       let _this = this;
    //       axios
    //         .post(
    //           "/code/momeapi/minicrmapp/test/header/",
    //           qs.stringify({
    //             _id: "5fdac51570a56dffacfd8fbb",

    //             company_id: "abc",

    //             app_id: "abc",

    //             modul_id: "bbc",

    //             role_id: "222",

    //             layout_id: "888888",
    //             type: _this.type,
    //           }),
    //           { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
    //         )
    //         .then((data) => {
    //           _this.data_header = data.data.data;
    //    _this.data_header.head_menu.forEach(element => {
    //               _this.iconArr.push("iconfont "+element.icon)
    //           });
    //         });
    //     },
    gotoPersonalCenter() {
      alert("点击了个人中心按钮");
    },
    gotoCompanyList() {
      alert("点击了企业列表按钮");
    },
    logout() {
      alert("退出");
    },
  },
  mounted() {
    this.test();
  },
};
</script>

<style scoped>
.root {
  display: flex;
  flex-direction: row;
}
.logo {
  width: auto;

  flex: 1;
}
.triggle {
  float: left;
  flex: 5;
}
.userPlace {
  flex: 1;
}
.tooPlace {
  margin-left: 100px;
  display: flex;
  flex: 3;
}
.toolBtn {
  margin-left: 10px;
  border: none;
}
</style>